<template>
  <div>
    <van-tabs v-model:active="active" color="red">
      <van-tab v-for="item in tabList" :title="item.text">
        <!-- 6.处理列表无数据时的情况 -->
        <div v-if="!list.length">
          <van-empty description="订单页空空如也" />
        </div>

        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div v-for="item in list" :key="item.id">
              <!-- 9.实现点击列表点击订单查看订单详情 -->
              <router-link :to="'/about/' + item.id">
              <van-cell-group>
                <van-cell title="单元格">
                  <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                  <template #right-icon>
                    <span>{{ item.zt }}</span>
                  </template>

                  <!-- 使用 title 插槽来自定义标题 -->
                  <template #title>
                    <span class="custom-title">2024-06-18</span>&ensp;
                    <span class="custom-title">2024-06-18</span>
                  </template>
                </van-cell>
              </van-cell-group>
              <van-card
                :num="item.num"
                :price="item.price"
                :title="item.title"
                :thumb="item.img"
              >
                <template #footer>
                  <van-button size="mini">取消订单</van-button>
                  <van-button size="mini">立即支付</van-button>
                </template>
              </van-card>
              </router-link>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import axios from "axios";
import { useCounterStore } from "@/store/index";
const store = useCounterStore();
const active = ref(0);
const tabList = [
  { text: "全部" },
  { text: "待付款" },
  { text: "待发货" },
  { text: "待收货" },
  { text: "已完成" },
  { text: "已取消" },
];
const list = ref([]);
const orderList = ref([]);
list.value = list.value.map((item) => {
  if (item.status == 1) {
    item.zt = "待付款";
  }
  if (item.status == 2) {
    item.zt = "待发货";
  }
  if (item.status == 3) {
    item.zt = "待收货";
  }
  if (item.status == 4) {
    item.zt = "已完成";
  }
  if (item.status == 5) {
    item.zt = "已取消";
  }
  return item;
});
// console.log(list.value);

watch(active, (val) => {
  store.setactive(val);
  if (val == 0) {
    orderList.value = list.value;
  }
});

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    axios.get("/getlist").then((res) => {
      console.log(res);
      list.value = list.value.concat(res.data.list);
    });
    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
</script>
<style scoped lang='scss'>
</style>